<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  title_icon: {
    type: String,
    required: true,
  },
  content: {
    type: String,
    default: '',
  },
  editable: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['edit'])

const handleEdit = () => {
  emit('edit')
}
</script>

<template>
  <view class="bg-white text-sm rounded-lg mt-1 mb-4">
    <view class="pl-4 pt-2 flex flex-col">
      <view class="flex items-center justify-between">
        <view class="flex items-center justify-center">
          <text
            :class="title_icon"
            class="w-4 h-4 text-blue-500 flex items-center justify-center rounded-full"
          ></text>
          <view class="pl-2">{{ title }}</view>
        </view>
        <view
          v-if="editable"
          @click="handleEdit"
          class="flex items-center mr-3 bg-gray-50 rounded-md px-3 py-1"
        >
          <text class="text-sm">编辑</text>
        </view>
      </view>
      <view class="text-sm mt-2 mr-2 mb-2">{{ content || '暂无内容' }}</view>
    </view>
  </view>
</template>
